<template>
    <div v-loading="loading">
        <el-dialog :visible.sync="visible" :title="type == 'create' ? '添加充值选择' : '修改充值选择'" width="800px">
            <el-form :model="form" label-width="110px">
                <el-form-item label="充值金币" >
                    <el-input placeholder="请输入充值金币" style="width: 500px" v-model="form.balance"></el-input>
                </el-form-item>
                <el-form-item label="原价">
                    <el-input placeholder="请输入原价" style="width: 500px" v-model="form.price"></el-input>
                </el-form-item>
                <el-form-item label="活动价">
                    <el-input placeholder="请输入活动价" style="width: 500px" v-model="form.active_price"></el-input>
                </el-form-item>
                <el-form-item label="苹果产品ID">
                    <el-input placeholder="请输入苹果产品ID" style="width: 500px" v-model="form.ios_product"></el-input>
                </el-form-item>
            </el-form>
            <div class="dialog-footer" slot="footer">
                <el-button @click="closeBox">取 消</el-button>
                <el-button @click="submit" :loading="submitComplete" type="primary">确 定</el-button>
            </div>
        </el-dialog>
        <el-card body-style="padding:10px" class="box-card">
            <el-input clearable placeholder="请输入苹果产品ID" size="small" style="width: 200px;"
                v-model="query.ios_product"></el-input>
            <el-button @click="page=1;init()" size="small" style="margin-left: 30px;" type="primary">搜索</el-button>
            <el-button @click="toForm()" size="small" style="width: 60px" type="success"  v-permission="['ADMIN','RECHARGE_SELECT_ADD']">添加</el-button>
            <el-button @click="page=1;init()" icon="el-icon-refresh-right" size="small" type="primary">刷新</el-button>
        </el-card>

        <el-card body-style="padding:10px" class="box-card mt-10">
            <el-table :data="data" max-height="640px" size="small" style="width: 100%">
                <el-table-column label="ID" prop="id"></el-table-column>
                <el-table-column label=" 充值金币" prop="balance"></el-table-column>
                <el-table-column label="原价" prop="price"></el-table-column>
                <el-table-column label="活动价" prop="active_price"></el-table-column>
                <el-table-column label="苹果产品ID" prop="ios_product"></el-table-column>
                <el-table-column label="添加时间" sortable prop="created_at"></el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button @click="toForm(scope.row)" size="mini" type="primary"
                            style="padding: 10px" v-permission="['ADMIN','RECHARGE_SELECT_UPDATE']">修改</el-button>
                        <el-popconfirm @confirm="del(scope.row.id)" title="这是一段内容确定删除吗？">
                            <el-button size="mini" slot="reference" type="danger" style="padding: 10px" v-permission="['ADMIN','RECHARGE_SELECT_DELETE']">删除</el-button>
                        </el-popconfirm>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>

        <!-- 分页组件 -->
        <el-card body-style="padding:10px" class="box-card mt-10">
            <el-pagination :current-page="page" :total="total" @current-change="pageChange" @size-change="sizeChange"
                layout="total, prev, pager, next, sizes" style="margin-top: 8px;" />
        </el-card>
    </div>
</template>
      
<script>
import treeSelect from '@/components/SelectTree/index'
import medium from '@/components/medium/index'
import initData from '@/mixins/index'
import list from "@/api/bank.json"
export default {
    name:"recharge-select",
    mixins: [initData],
    components: {
        treeSelect,
        medium
    },
    data() {
        return {
            query: {
                ios_product: ""
            },
            form: {
                balance: '',
                price: '',
                active_price: '',
                ios_product: ''
            },
            visible: false,
            loading: false,
            type: 'create',
            worksId: '',
            vuale:"",
            submitComplete:false,
            obj:{
                something:"999"
            }

        }
    },
    mounted() {
        //this.getworksList()
        this.beforeInit()

        

        console.log("list", list)
    },
    methods: {
        sss(){
            console.log("我被调用了")
            this.obj.something = "78"
        },
        toArray(str) {
            const arr = []
            arr.push(str)
            return arr
        },

        beforeInit() {
            this.url = '/recharge-money/index'
            this.init() //重新请求数据
        },

        del(id) {
            this.$request.del('/recharge-money/delete/' + id).then((res) => {
                this.$message.success('删除成功')
                this.init() //重新请求数据
            })
        },

        setMedium(value) {
            this.form.icon = value
            console.log("value", value)
        },

        toForm(form = null) {
            this.visible = true //打开弹出框
            if (form != null) {
                this.type = 'update'
            //    this.worksId = form.id
                this.form = form
            } else {
                this.type = 'create'
                this.worksId = ""
                this.form = {
                    balance: '',
                    price: '',
                    active_price: '',
                    ios_product: ''
                }
            }
        },

        closeBox() {
            this.type = 'create'
            this.visible = false
            this.form = {
                balance: '',
                price: '',
                active_price: '',
                ios_product: ''
            }
        },


        //提交
        submit() {
            if(this.submitComplete) return
            this.submitComplete = true
            if (!(this.form.balance && this.form.price && this.form.active_price)) {
                this.$message({
                    message: '请将信息填写完整！',
                    type: 'warning'
                });
                this.submitComplete = false
                return
            }
            if (this.type == 'create') {
                this.$request.post('/recharge-money/create', this.form).then((res) => {
                    this.$message({
                        message: '添加成功',
                        type: 'success'
                    });

                    this.init() //重新请求数据
                    this.closeBox()
                    this.submitComplete = false

                }).catch((error) => {
                    this.submitComplete = false
                });
            } else {
                this.$request.put('/recharge-money/update/' + this.form.id, this.form).then((res) => {
                    console.log(res)
                    this.$message({
                        message: '修改成功',
                        type: 'success'
                    });
                    this.init() //重新请求数据
                    this.closeBox()
                    this.submitComplete = false
                }).catch((error) => {
                    this.submitComplete = false
                });
            }
        },
    },
}
</script>
      
<style lang="scss" scoped>
.butBox {
    background-color: rgb(219, 219, 219);
    border: none;
    color: #555;
}
</style>